Tiles
Dashboard Tiles
HTML
<div class="tile-row">
<a href="#" class="tile-link">
<div class="tile-content profile-tile">
<i class="tile-icon" aria-hidden="true"></i>
<p class="tile-title">Profile</p>
</div>
</a>
</div>
Problem Being Solved
Users need a way to see the myriad apps they can drill down into.
When to Use
This pattern should be used to present a series of unrelated, equally-weighted links to apps. It works best when we can assume nothing about the best path forward.
When Not to Use
This pattern should not be used for anything except a dashboard.
Formatting
Currently, individual tile colors and icons are hard coded per app. Be sure to use or create styles and classes specific to the app.
Alternative Tiles
HTML
<div class="tiles-alt">
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-play_button white" aria-hidden="true"></i>
<div class="tile-alt-title">Videos</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-newspaper white" aria-hidden="true"></i>
<div class="tile-alt-title">Articles</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-laptop white" aria-hidden="true"></i>
<div class="tile-alt-title">Webinars</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-book white" aria-hidden="true"></i>
<div class="tile-alt-title">Books & Chapters</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-graph_up_down_3 white" aria-hidden="true"></i>
<div class="tile-alt-title">Reports</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-audio white" aria-hidden="true"></i>
<div class="tile-alt-title">Podcasts</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-laptop white" aria-hidden="true"></i>
<div class="tile-alt-title">Online Courses</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-book_open white" aria-hidden="true"></i>
<div class="tile-alt-title">Instructor-Led Courses</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-calendar white" aria-hidden="true"></i>
<div class="tile-alt-title">Events</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-book_bookmark white" aria-hidden="true"></i>
<div class="tile-alt-titlev">Refresher Readings</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-folded_paper white" aria-hidden="true"></i>
<div class="tile-alt-title">Magazine Issues</div>
</div>
</a>
</div>
<div class="tile-alt">
<a href="#" class="tile-alt-link">
<div class="tile-alt-content">
<i class="tile-alt-icon cfaicon-government white" aria-hidden="true"></i>
<div class="tile-alt-title">Exec Ed Workshop</div>
</div>
</a>
</div>
</div>
Problem Being Solved
We want to present tiles in an alternative but still simple and aproachable way.
When to Use
This pattern should be used to present a series of equally-weighted links, probably related in some way.
When Not to Use
This pattern should not be used when a normal link will suffice.
Formatting
Current color possibilities are blue (default) and p_green. Add the color class to the "tiles-alt" group container.